<style>
    .layui-card {
        padding: 10px 10px 1px 10px;
    }
</style>
<title>用户列表</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>角色管理</cite></a>
        <a><cite>角色权限</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-card">
        <form class="layui-form" lay-filter="lay-filter-form">
            <div class="layui-form-item">
                <label class="layui-form-label">选择角色：</label>
                <div class="layui-input-inline">
                    <select name="roleid" id="rolelist" lay-filter="rolelist">
                        <option value=""></option>
                    </select>
                </div>
                <button type="button" lay-submit lay-filter="LAY-save" class="layui-btn layui-input-inline">保存</button>
                <div class="layui-form-mid layui-word-aux">选择角色后，勾选对应权限并保存。</div>
            </div>
        </form>
    </div>
    <div class="layui-card">
        <div class="myscroll layui-card" data-type="nodetree" id="nodetree">
            <div class="layui-card-body">
                <div id="role-node-tree"></div>
            </div>
        </div>
    </div>
</div>


<script>
    layui.use(['admin', 'setter', 'form', 'layTree'], function () {
        var $ = layui.$
            , admin = layui.admin
            , view = layui.view
            , setter = layui.setter
            , layTree = layui.layTree
            , form = layui.form;

        //不render，form元素显示不出来
        form.render(null, 'lay-filter-form');

        //加载角色select
        admin.req({
            url: setter.apiUrl + "/role-api/all-roles"
            , type: 'GET'
            , data: JSON.stringify(form.field)
            , contentType: "application/json;charset=UTF-8"
            , success: function (data) {
                //使用循环遍历，给下拉列表赋值
                $.each(data.data, function (index, value) {
                    $('#rolelist').append(new Option(value.name, value.id));// 下拉菜单里添加元素
                });
                layui.form.render("select");
            }
        });

        form.on('select(rolelist)', function (o) {
            // console.info(o); 
            layTree.CreateTree("role-node-tree", "/role-api/node-tree-with-role/"+o.value, { id: 0 }, true, true, null);
        });

        //保存
        form.on('submit(LAY-save)', function (data) {
            var checkedData = layui.tree.getChecked('role-node-tree'); //获取选中节点的数据

            console.info(data);
            if (checkedData.length != 0) {
                //保存
                admin.req({
                    url: setter.apiUrl + "/role-api/role-node-list/"+data.field.roleid
                    , type: 'POST'
                    , data: JSON.stringify(checkedData)
                    , contentType: "application/json;charset=UTF-8"
                    , success: function (res) {
                        console.info(res);
                    }
                });
            } else {
                layer.alert("没有被选中的节点："+JSON.stringify(checkedData));
            }
        });


    });
</script>